<!DOCTYPE html>
<html lang="en">
<head>{% include "header.html" %}
</head>
<body>
  {% include "topbar.html" %}
  {% if retry %}
    <div class="alert alert-warning">Login info incorrect. Please try again</div>
  {% endif %}
  <div class="container">
    <div class="content">
      <div class="row">
        <div class="span4 well" style="height: 16em;padding: 22px">
          <span class="span4"><legend style="color: grey">Create a new profile</legend></span>
          <input id="username" class="span4 profile-field" type="text" placeholder="Username">
          <input id="password1" class="span4 profile-field" type="password" placeholder="Password">
          <input id="password2" class="span4 profile-field" type="password" placeholder="Re-type Password">
          <a id="create-account" href="#" class="btn btn-info span1 disabled" style="margin-left: 1px">Create</a>
          <a id="username-error-div" class="btn btn-warning disabled hide span2" style="width: 12em">
            Username is unavailable
          </a>
          <a id="password-error-div" style="width: 12em" class="btn btn-warning disabled hide span2">
            Passwords must match and cannot be empty
          </a>
          <a id="account-creation-div" style="width: 12em" class="btn btn-success disabled hide span2">
            Processing request...
          </a>
        </div>
        <div class="span5 well" style="height: 16em;padding: 22px">
          <span class="span5"><legend style="color: grey">Sign into existing account</legend></span>
          <form method="POST" action="/signIn/">
            {% csrf_token %}
	          <input name="username" type="text" class="input-small span2" placeholder="Username">
		        <input name="password" type="password" class="input-small span2" placeholder="Password">
	          <button id="login-button" type="submit" class="btn btn-info" style="float: right; width:5em">Go</button>
	        </form>
	        <span class="span5">
	          <br>
	          <span class="span1 offset1 bolded" style="color: grey">Or</span>
	          <br><br>
	          <legend>
	            <a href="/login/" class="goodlink"><img src="/site_media/images/google.png"
	               width="23.5"
	               title="Sign in with google account" />&nbsp&nbspSign in with Google</a>
	          </legend>
	        </span>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">
 $(document).ready(function() {
	 window.usernameGood = false;
	 window.passwordGood = false;

	 $(".profile-field").keyup(function(){

		 username = $("#username").val();
		 password1 = $("#password1").val();
     password2 = $("#password2").val();

     passwordGood = (password1 == password2) && password1 != "";
     if (!passwordGood) {
        if (password1 == "" && password2 == "") {
      	  $("#password-error-div").text("Please enter a password");
        }
        else {
      	  $("#password-error-div").text("Passwords must match");
        }
        $("#username-error-div").hide();
        if(!$("#password-error-div").is(":visible")){
          $("#password-error-div").fadeIn();
          $("#create-account").attr("disabled", "disabled");
          $("#create-account").addClass("disabled");
        }
     }
     else {
        $("#password-error-div").fadeOut();
      }


   	 $.post("/isPlayerNameUnique/", {"name":$("#username").val()})
       .success(function(data) {
    	  console.log(data);
       	usernameGood = data["unique"] == true;
         if (!usernameGood) {
        	 $("#password-error-div").hide();
       	   if(!$("#username-error-div").is(":visible")){
       		   $("#username-error-div").fadeIn();
       		   $("#create-account").attr("disabled", "disabled");
             $("#create-account").addClass("disabled");
       	   }
         }

         else {
            $("#username-error-div").fadeOut();
         }
         updateCreateButton();
       });

	 });

	 function updateCreateButton() {
		 if (usernameGood && passwordGood) {
       $("#username-error-div").fadeOut();
       $("#password-error-div").fadeOut();
       $("#create-account").removeAttr("disabled");
       $("#create-account").removeClass("disabled");
     }
     else {
       $("#create-account").attr("disabled", "disabled");
       $("#create-account").addClass("disabled");
     }
	 }

	 $("#create-account").click(function(event){
		 event.preventDefault();
		 if($(this).attr("disabled") == undefined){
			 username = $("#username").val();
	     password1 = $("#password1").val();
	     password2 = $("#password2").val();

	     $("#account-creation-div").fadeIn();
	     $.post("/createPlayer/", {"username":username, "password":password1})
         .success(function() {
        	 window.location.replace("/");
        	})
		 }
	 });

	 $("#password2").keypress(function(event) {
       var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
       if (keycode == 13 && !$("#create-account").hasClass("disabled")) {
    	   $("#create-account").click();
       }
   });

 });
</script>
</html>